<template>
<div class="wrap">
	<Gheader :showheader="data"></Gheader>
	<scroll  class="wrapper1"  :direction="'horizontal'"> 
		<div class="inwrap1">
			<!--选择列表-->
			<ul class="choose" >
				<li  v-for="(itme,index) in arr"  @click="choose(index) ">{{itme}}</li>
			</ul>
			
		</div>
	</scroll>
	<router-view name="allorder" :shangpin="shangpindata"></router-view>
</div>
</template>

<script>
	import Scroll from "../../../../base/Scroll"
	import Gheader from "../person-center/Gheader"
	export default{
		name:"Lookorder",
		data(){
			return{
				footernum:1,
				arr:["全部订单","待付款","待发货","待收货","交易完成"],
				data:{
					word:"全部订单",
					left:[true,false,false],
					right:[false,false,false,false,false,false],
					leftword:"",
					rightword1:"编辑",
					rightword2:"",
					jiantouurl:"/PersonalCenter/0"
				},
				shangpinid:[],
				shangpinzhuangtai:[],
				shangpindata:{
					unpaid:[],
					dropshipping:[],
					forthegoods:[],
					thedeal:[]
				}
				
			}
		},
		components:{
			Gheader,
			Scroll
		},
		methods:{
			choose:function  (Index) {
				 var lis = $(".choose li");
				 var urls = ["/Order/","/Unpaid/","/Dropshipping/","/Forthegoods/","/Thedeal/"];
				 this.$router.push({path:urls[Index]});
				 for(var i=0; i<lis.length;i++){
				 	if(Index==i){
//				 		console.log("点击");
				 		 $( lis[i]).css({
						 borderBottom:"1px solid red",
						 color : "red"
						  });
						   
				 	}else{
//				 		console.log(i);
				 		$(lis[i]).css({
					 	borderBottom:"1px solid #cccccc",
					 	color : "black"
					   });
				 	}
				 }		
			}
		},
		mounted:function  () {
			switch (this.$route.path){
			    		case "/Order/":{
			    			this.footernum=1;
			    			break;
			    		}
			    		case "/Unpaid/":{
			    			this.footernum=2;
			    			break;
			    		}
			    		case "/Dropshipping/":{
			    			this.footernum=3;
			    			break;
			    		}
			    		case "/Forthegoods/":{
			    			this.footernum=4;
			    			break;
			    		}
			    		case "/Thedeal/":{
			    			this.footernum=5;
			    			break;
			    		}

			   }
			var lis = $(".choose li");
					for (var i = 0; i < lis.length; i++) {
						if (this.footernum-1==i) {
							$( lis[i]).css({
								 borderBottom:"1px solid red",
								 color : "red"
								 })
						} else{
							$(lis[i]).css({
							 	borderBottom:"1px solid #cccccc",
							 	color : "black"
							   });
						}
					}
		},
		created:function(){
			
//			console.log(this.$store.state.personInfor);
			if(this.$store.state.personInfor.length!=0){
				var shangpinid=this.$store.state.personInfor[1].selectuser;
					for (var i=0; i<shangpinid.length;i++ ) {
						this.shangpinid.push(this.$store.state.personInfor[1].selectuser[i].shangpinid);
						this.shangpinzhuangtai.push(this.$store.state.personInfor[1].selectuser[i].zhuangtai);
					}	
			}
			for (let i = 0; i < this.shangpinid.length; i++) {
				this.axios.post("/api/lookorder",{
				id:this.shangpinid[i]
				}).then(function  (data) {
					if (this.shangpinzhuangtai[i]=="待付款") {
						this.shangpindata.unpaid.push(data.data.results[0]);
//						console.log("待付款");	
					} else if (this.shangpinzhuangtai[i]=="待发货") {
						this.shangpindata.dropshipping.push(data.data.results[0]);
//						console.log("待发货");
					} else if (this.shangpinzhuangtai[i]=="待收货") {
						this.shangpindata.forthegoods.push(data.data.results[0]);
//						console.log("待收货");
					}else if (this.shangpinzhuangtai[i]=="交易完成"){
						this.shangpindata.thedeal.push(data.data.results[0]);
//						console.log("交易完成");
					}else {
//						console.log("走这里了");
					}
				
				}.bind(this));
			}
//			console.log(this.shangpindata);
		},
			beforeRouteUpdate(to, from , next){
		    		switch (to.path){
			    		case "/Order/":{
			    			this.footernum=1;
			    			break;
			    		}
			    		case "/Unpaid/":{
			    			this.footernum=2;
			    			break;
			    		}
			    		case "/Dropshipping/":{
			    			this.footernum=3;
			    			break;
			    		}
			    		case "/Forthegoods/":{
			    			this.footernum=4;
			    			break;
			    		}
			    		case "/Thedeal/":{
			    			this.footernum=5;
			    			break;
			    		}
}

//		    		console.log(vm.footernum)
					var lis = $(".choose li");
					for (var i = 0; i < lis.length; i++) {
						if (this.footernum-1==i) {
							$( lis[i]).css({
								 borderBottom:"1px solid red",
								 color : "red"
								 })
						} else{
							$(lis[i]).css({
							 	borderBottom:"1px solid #cccccc",
							 	color : "black"
							   });
						}
					}

				
				next();
	},
		beforeRouteEnter(to, from , next){
			next(vm=>{
		    		switch (to.path){
			    		case "/Order/":{
			    			vm.footernum=1;
			    			break;
			    		}
			    		case "/Unpaid/":{
			    			vm.footernum=2;
			    			break;
			    		}
			    		case "/Dropshipping/":{
			    			vm.footernum=3;
			    			break;
			    		}
			    		case "/Forthegoods/":{
			    			vm.footernum=4;
			    			break;
			    		}
			    		case "/Thedeal/":{
			    			vm.footernum=5;
			    			break;
			    		}

			    }
//		    		console.log(vm.footernum)
					var lis = $(".choose li");
					for (var i = 0; i < lis.length; i++) {
						if (vm.footernum-1==i) {
							$( lis[i]).css({
								 borderBottom:"1px solid red",
								 color : "red"
								 })
						} else{
							$(lis[i]).css({
							 	borderBottom:"1px solid #cccccc",
							 	color : "black"
							   });
						}
					}
				})
	}
}
</script>

<style scoped>
	
	.wrap{
		width: 100%;
		height: 100vh;
		background: #F2F2F2;
	}
	.wrapper1{
		width: 100%;
		overflow: hidden;
	}
	.inwrap1{
		width: 100%;
		height: 6vh;
	}
	.inwrap1 ul{
		font-size: 0;
		width: 100%;
		background: white;
		border-bottom:1px solid #CCCCCC ;
	}
	.inwrap1 ul>li {
		line-height:6vh ;
		text-align: center;
		font-size:1.4rem;
		display: inline-block;
		width: 20%;
	}
	.inwrap1 ul>li:nth-child(1){
		color: red;
		border-bottom: 1px solid red;
	}
</style>
